<template>
  <div class="app-container"  style="background-color: black;">
    <header class="top-bar">
      <div class="logo">皓月影视</div>
      <div class="search-container" >
        <button class="filter-btn">筛选</button>
        <input type="text" class="search-input" placeholder="搜索影视节目">
        <button class="search-btn">搜索</button>
      </div>
      <div class="header-actions">
        <button class="action-btn">消息</button>
        <button class="action-btn">历史</button>
        <button class="login-btn">登录</button>
      </div>
    </header>
    <div class="main-content">
      <aside class="sidebar">
          <nav class="sidebar-nav">
            <router-link to="/" class="nav-item" active-class="active">
              <i class="icon-home"></i> 首页
            </router-link>
            <router-link to="/tv" class="nav-item" active-class="active">
              <i class="icon-tv"></i> 电视剧
            </router-link>
            <router-link to="/movies" class="nav-item" active-class="active">
              <i class="icon-movie"></i> 电影
            </router-link>
            <router-link to="/variety" class="nav-item" active-class="active">
              <i class="icon-variety"></i> 综艺
            </router-link>
            <router-link to="/anime" class="nav-item" active-class="active">
              <i class="icon-anime"></i> 动漫
            </router-link>
            <router-link to="/documentaries" class="nav-item" active-class="active">
              <i class="icon-documentary"></i> 纪录片
            </router-link>
          </nav>
      </aside>
      <main class="content">
        <section class="banner">
          <!-- Replace static image with carousel -->
          <BannerCarousel :slides="currentSlides" />
        </section>
          <router-view />
      </main>
    </div>
    <footer class="app-footer">
      <p>&copy; 2024 皓月影视 版权所有</p>
    </footer>
  </div>
</template>

<script setup>
import MovieList from './components/MovieList.vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import BannerCarousel from './components/BannerCarousel.vue';
import pic1 from '../picture/首页/pic1.jpg';
import pic2 from '../picture/首页/pic2.jpg';
import pic3 from '../picture/首页/pic3.jpg';
import tvPic1 from '../picture/电视剧/pic1.jpg';
import tvPic2 from '../picture/电视剧/pic2.jpg';
import moviePic1 from '../picture/电影/pic1.jpg';
import moviePic2 from '../picture/电影/pic2.jpg';
import varietyPic1 from '../picture/综艺/pic1.jpg';
import varietyPic2 from '../picture/综艺/pic2.jpg';
import animePic1 from '../picture/动漫/pic1.jpg';
import animePic2 from '../picture/动漫/pic2.jpg';
import docuPic1 from '../picture/纪录片/pic1.jpg';
import docuPic2 from '../picture/纪录片/pic2.jpg';

const route = useRoute();
const isHomePage = computed(() => route.path === '/');

const pageSlides = {
  '/': [
    { id: 1, title: '首页标题1', description: '首页简介1', imageUrl: pic1 },
    { id: 2, title: '首页标题2', description: '首页简介2', imageUrl: pic2 },
    { id: 3, title: '首页标题3', description: '首页简介3', imageUrl: pic3 }
  ],
  '/tv': [
    { id: 1, title: '电视剧标题1', description: '电视剧简介1', imageUrl: tvPic1 },
    { id: 2, title: '电视剧标题2', description: '电视剧简介2', imageUrl: tvPic2 }
  ],
  '/movies': [
    { id: 1, title: '电影标题1', description: '电影简介1', imageUrl: moviePic1 },
    { id: 2, title: '电影标题2', description: '电影简介2', imageUrl: moviePic2 }
  ],
  '/variety': [
    { id: 1, title: '综艺标题1', description: '综艺简介1', imageUrl: varietyPic1 },
    { id: 2, title: '综艺标题2', description: '综艺简介2', imageUrl: varietyPic2 }
  ],
  '/anime': [
    { id: 1, title: '动漫标题1', description: '动漫简介1', imageUrl: animePic1 },
    { id: 2, title: '动漫标题2', description: '动漫简介2', imageUrl: animePic2 }
  ],
  '/documentaries': [
    { id: 1, title: '纪录片标题1', description: '纪录片简介1', imageUrl: docuPic1 },
    { id: 2, title: '纪录片标题2', description: '纪录片简介2', imageUrl: docuPic2 }
  ]
};

const currentSlides = computed(() => pageSlides[route.path] || pageSlides['/']);
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar {
  background-color: #1a1a1a; /* 左侧栏设置更深的灰色 */
  width: 220px;
  padding-top: 10px;
}

.content {
  background-color: #1a1a1a; /* 右边内容下方背景设置更深的灰色 */
  flex-grow: 1;
  padding: 20px;
  padding-top: 84px;
  margin-left: 220px;
}

.top-bar {
  background-color: #0f172a;
  color: white;
  padding: 0 30px;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: white; /* 设置 logo 文字颜色为白色 */
}

.nav-menu {
  display: flex;
  margin: 0 auto;
}

.nav-menu .nav-item {
  color: white; /* 设置导航菜单项文字颜色为白色 */
  text-decoration: none;
  padding: 0 15px;
  height: 64px;
  line-height: 64px;
  transition: all 0.2s;
  display: flex; /* 新增，使内容可居中 */
  justify-content: center; /* 新增，水平居中 */
  align-items: center; /* 新增，垂直居中 */
}

.nav-menu .nav-item:hover,
.nav-menu .nav-item.active {
  color: #fff;
  border-bottom: 3px solid #3b82f6;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.login-btn {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.login-btn:hover {
  background-color: #2563eb;
}

.main-content {
  display: flex;
  margin-top: 64px;
  flex: 1;
}

.sidebar {
  width: 220px;
  background-color: #0f172a;
  color: white;
  min-height: calc(100vh - 64px);
  position: fixed;
}

.sidebar-nav {
  padding-top: 5px;
}

.sidebar .nav-item {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 12px 20px;
  transition: all 0.2s;
  display: flex; /* 新增，使内容可居中 */
  justify-content: flex-start;  /*左对齐内容*/
}

.sidebar .nav-item i {
  margin-right: 10px; /* 图标与文字间距*/
  width: 20px; /* 图标宽度*/
  height: 20px; /* 图标高度*/
  display: inline-block;
}

.icon-home {
  background: url('../picture/icons/home.svg') no-repeat center/contain;
}

.icon-tv {
  background: url('../picture/icons/tv.svg') no-repeat center/contain;
}

.icon-movie {
  background: url('../picture/icons/movie.svg') no-repeat center/contain;
}

.icon-variety {
  background: url('../picture/icons/variety.svg') no-repeat center/contain;
}

.icon-anime {
  background: url('../picture/icons/anime.svg') no-repeat center/contain;
}

.icon-documentary {
  background: url('../picture/icons/documentary.svg') no-repeat center/contain;
}
.sidebar .nav-item:hover,
.sidebar .nav-item.active {
  color: white;
  background-color: rgba(59, 130, 246, 0.2);
  border-left: 4px solid #3b82f6;
}

.content {
  margin-left: 220px;
  flex: 1;
  padding: 20px;
  background-color: black;
}

.banner {
  width: 100%;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-footer {
  background-color: #0f172a;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 20px;
  margin-left: 220px;
}
</style>

<style>
body {
  margin: 0;
}

.search-container {
  display: flex;
  width: 600px; /* 增加搜索框长度 */
  height: 32px; /* 减小上下宽度 */
  background-color: #0f172a; /* 设置背景颜色与上栏底色一致 */
  border-radius: 8px; /* 降低框角圆滑度 */
  overflow: hidden;
  border: 2px solid #3b82f6;
}

.filter-btn {
  width: calc(100% / 6);
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.filter-btn:hover {
  background-color: rgba(59, 130, 246, 0.2);
}

.search-input {
  flex-grow: 1;
  border: none;
  padding: 0 15px;
  font-size: 16px;
}

.search-input:focus {
  outline: none;
}

.search-btn {
  width: calc(100% / 6);
  background-color: #3b82f6;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-btn:hover {
  background-color: #2563eb;
}
</style>